import XtxMessage from './xtx-message.vue'
import { createApp } from 'vue'
function fn (obj) {
  // 该方法能够使用一个xtx-message.vue组件，
  // 1:让该组件的html渲染到body内，const app=createApp(导入的组件,props传参)获取了组件的内容   app.mount(dom)  将导入的组件的html内容渲染到dom,会替换dom内的内容
  // 2:加入动画处理
  // 3:过一会就消失
  // 4:消失后完全的销毁该组件  app.unmount(div)
  // 5:多个message位置排序
  const div = document.createElement('div')
  div.setAttribute('class', 'message')
  document.body.appendChild(div)
  const app = createApp(XtxMessage, { ...obj, remove })
  const _this = app.mount(div)
  // 显示message组件
  // _this.show()
  const messageList = document.getElementsByClassName('message')
  setTimeout(() => {
    for (let i = 0; i < messageList.length; i++) {
      messageList[i].querySelector('.xtx-message').style.marginTop =
        i * 80 + 'px'
    }
  }, 0)
  console.log(messageList)
  //   消失时移除message组件
  function remove () {
    app.unmount(div)
    document.body.removeChild(div)
    const messageList = document.getElementsByClassName('message')
    for (let i = 0; i < messageList.length; i++) {
      messageList[i].querySelector('.xtx-message').style.marginTop =
        i * 80 + 'px'
    }
  }
}
function Message (obj) {
  fn(obj)
}
Message.success = function (obj) {
  obj.type = 'success'
  fn(obj)
}
export { Message }
